<html>
<wicket:extend>
<div class="top-links">
	<a class="icon-right" href="#" onClick="helpPopUp();return false;"><img wicket:id="help" /></a>
  <a class="icon-right" href="#" onClick="window.location.reload();return false;"><img wicket:id="refresh" /></a>
  <a class="icon-right" href="#" onClick="window.print();return false;"><img wicket:id="printer" /></a>
  <div class="clear"></div>
</div>

<h1>Welcome, Home Owner</h1>

<div class="column-two">
	<div class="inner">
    <div class="tab-wrapper" id="tabset-1">
      <ul class="tabs">
        <li class="tab-1"><a href="#">Day</a></li>
        <li class="tab-2"><a href="#">Week</a></li>
        <li class="tab-3"><a href="#">Month</a></li>
        <li class="tab-4"><a href="#">Year</a></li>
      </ul>
      <ul class="tab-content">
 				<li class="content-1">
        	<h5 class="left">System Energy Statistics (Day)</h5>
          <div class="right medium-large dark-purple">38.7 kWh/day</div>
          <div class="clear"></div>
          <p class="info" style="margin-top: 10px;">You are currently using <strong>38.7 kWh/day</strong> or roughly <strong>$10.01/day</strong>. Your average Daily Energy Usage is <strong>35.2  kWh/day</strong>.</p>
          <center><img wicket:id="consprodD" /></center>
        </li>
        <li class="content-2">
        	<h5 class="left">System Energy Statistics (Week)</h5>
          <div class="right medium-large dark-purple">270.9 kWh/week</div>
          <div class="clear"></div>
          <p class="info" style="margin-top: 10px;">You are currently using <strong>270.9 kWh/week</strong> or roughly <strong>$70.07/week</strong>. Your average Weekly Energy Usage is <strong>246.4  kWh/week</strong>.</p>
          <center><img wicket:id="consprodW" /></center>
        </li>
        <li class="content-3">
        	<h5 class="left">System Energy Statistics (Month)</h5>
          <div class="right medium-large dark-purple">1161 kWh/month</div>
          <div class="clear"></div>
          <p class="info" style="margin-top: 10px;">You are currently using <strong>1161 kWh/month</strong> or roughly <strong>$300.30/month</strong>. Your average Monthly Energy Usage is <strong>1056  kWh/month</strong>.</p>
          <center><img wicket:id="consprodM" /></center>
        </li>
        <li class="content-4">
        	<h5 class="left">System Energy Statistics (Year)</h5>
          <div class="right medium-large dark-purple">14125.5 kWh/year</div>
          <div class="clear"></div>
          <p class="info" style="margin-top: 10px;">You are currently using <strong>14125.5 kWh/year</strong> or roughly <strong>$3653.65/year</strong>. Your average Yearly Energy Usage is <strong>12848  kWh/year</strong>.</p>
          <center><img wicket:id="consprodY" /></center>
        </li>
      </ul>
      <div class="clear"></div>
    </div>
  </div>
</div>

<div class="column-two" style="padding-top:30px;">
  <div class="column-three-two">
  	<div class="inner">
      <div class="box">
      	<h2>Localization</h2>
        <div class="move-to-box-header right">[<a href="#">edit</a>]</div>
        <p class="medium black">Honolulu, HI 96186</p>
        <div class="left" style="width: 50%;">
          <p class="x-large dark-blue no-margin">76&deg; F</p>
          <p>82&deg; Outside<br />Sunny, Windy</p>
          <p class="large blue no-margin">4:55pm</p>
          <p class="small black">Sunrise: 643am<br />Sunset: 7:01pm</p>
        </div>
        <div class="left" style="width: 50%;">
          <img alt="weather" wicket:id="weather" />
        </div>
        <div class="clear"></div>
      </div>
    </div>
  </div>
  <div class="column-three">
  	<div class="inner">
      <div class="box">
        <h2>Presets</h2>
        <div class="move-to-box-header right">[<a href="#">edit</a>]</div>
        <p class="message">Globally apply presets.</p>
      	<div style="line-height:20px;">
          <a href="#">Morning Preset</a><br />
          <a href="#">Afternoon Preset</a><br />
          <a href="#">Evening Preset</a><br />
          <a href="#">Away Preset</a><br />
        </div>
      </div>
    </div>
  </div>
</div>

<div class="clear"></div>

<div class="inner">
	<div class="box">
    <h2>System Log</h2>
    <form action="#" class="table-wrapper" method="get" name="tableform">
      <p class="show-count">
        Show&nbsp;
        <select>
          <option>10</option>
          <option>20</option>
          <option>30</option>
          <option>40</option>
        </select>
        &nbsp;Entries
      </p>
      <p class="showing">Showing 1 - 8 of 567 entries</p>
      <table cellpadding="0" cellspacing="0" class="sortable" width="100%">
        <thead>
          <tr>
            <th>Who?<a class="sort-asc" href="#">&nbsp;</a></th>
            <th>When?<a class="sort-desc" href="#">&nbsp;</a></th>
            <th>What?<a class="sort-desc" href="#">&nbsp;</a></th>
            <th>Actions<a class="sort-desc" href="#">&nbsp;</a></th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <th>Who?</th>
            <th>When?</th>
            <th>What?</th>
            <th>Actions</th>
          </tr>
        </tfoot>
        <tbody>
          <tr>
            <td>System</td>
            <td>Today @ 4:00pm</td>
            <td>Hourly Status Update: 72&deg;F Inside, 82&deg;F Outside, 1.2kWh/day Energy Usage, 63% Energy Capacity</td>
            <td>
              <a class="icon-left" wicket:id="TemperaturePageLink" href="#">Temperature</a>
              <a class="icon-left" wicket:id="EnergyPageLink" href="#">Energy</a>
            </td>
          </tr>
          <tr>
            <td>Home Owner 2</td>
            <td>Today @ 3:33pm</td>
            <td>Manually changed Target Temperature to 73&deg;F</td>
            <td>
              <a class="icon-left" wicket:id="TemperaturePageLink" href="#">Temperature</a>
            </td>
          </tr>
          <tr>
            <td>System</td>
            <td>Today @ 3:00pm</td>
            <td>Hourly Status Update: 69&deg;F Inside, 81&deg;F Outside, 1.4kWh/day Energy Usage, 67% Energy Capacity</td>
            <td>
              <a class="icon-left" wicket:id="TemperaturePageLink" href="#">Temperature</a>
              <a class="icon-left" wicket:id="EnergyPageLink" href="#">Energy</a>
            </td>
          </tr>
          <tr>
            <td>System</td>
            <td>Today @ 3:00pm</td>
            <td>Automatically enabled 'Afternoon' preset per schedule</td>
            <td>
              <a class="icon-left" wicket:id="TemperaturePageLink" href="#">Temperature</a>
              <a class="icon-left" wicket:id="EnergyPageLink" href="#">Energy</a>
              <a class="icon-left" wicket:id="SettingsPageLink" href="#">Settings</a>
            </td>
          </tr>
          <tr>
            <td>System</td>
            <td>Today @ 2:00pm</td>
            <td>Hourly Status Update: 69&deg;F Inside, 83&deg;F Outside, 1.5kWh/day Energy Usage, 69% Energy Capacity</td>
            <td>
              <a class="icon-left" wicket:id="TemperaturePageLink" href="#">Temperature</a>
              <a class="icon-left" wicket:id="EnergyPageLink" href="#">Energy</a>
            </td>
          </tr>
          <tr>
            <td>System</td>
            <td>Today @ 1:00pm</td>
            <td>Hourly Status Update: 70&deg;F Inside, 84&deg;F Outside, 1.1kWh/day Energy Usage, 65% Energy Capacity</td>
            <td>
              <a class="icon-left" wicket:id="TemperaturePageLink" href="#">Temperature</a>
              <a class="icon-left" wicket:id="EnergyPageLink" href="#">Energy</a>
            </td>
          </tr>
          <tr>
            <td>System</td>
            <td>Today @ 12:00pm</td>
            <td>Hourly Status Update: 72&deg;F Inside, 82&deg;F Outside, 1.2kWh/day Energy Usage, 63% Energy Capacity</td>
            <td>
              <a class="icon-left" wicket:id="TemperaturePageLink" href="#">Temperature</a>
              <a class="icon-left" wicket:id="EnergyPageLink" href="#">Energy</a>
            </td>
          </tr>
          <tr>
            <td>System</td>
            <td>Today @ 12:00pm</td>
            <td>Automatically enabled 'Noon' preset per schedule</td>
            <td>
              <a class="icon-left" wicket:id="TemperaturePageLink" href="#">Temperature</a>
              <a class="icon-left" wicket:id="EnergyPageLink" href="#">Energy</a>
              <a class="icon-left" wicket:id="SettingsPageLink" href="#">Settings</a>
            </td>
          </tr>
        </tbody>
      </table>
      <p class="pagination">
        <a class="previous" href="#">&nbsp;</a>
        <span class="current">1</span>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a class="next" href="#">&nbsp;</a>
      </p>
      <p class="showing">Showing 1 - 8 of 567 entries</p>
      <div class="clear"></div>
    </form>
  </div>
</div>    
      
</wicket:extend>
</html>

